<template>
  <div class="content">
    <div style="">批量回退</div>
    <el-form :model="ruleForm" label-width="140px" class="ruleForm" id="form">
      <div style="display: block;width: 800px;margin-left: 200px;">
        <el-form-item label="产品码" class="item">
          <el-input v-model="ruleForm.code" ref="input" readonly></el-input>
        </el-form-item>
        <el-form-item label="订单类型" class="item">
          <el-select v-model="ruleForm.type" placeholder="请选择" @change="typeChange()">
            <el-option v-for="item in options" :key="item" :label="item" :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="产品规格" class="item">
          <el-input v-model="ruleForm.specs" ref="input" readonly></el-input>
        </el-form-item>
        <el-form-item label="工艺码" class="item">
          <el-input v-model="ruleForm.production" ref="input" readonly></el-input>
        </el-form-item>

        <div v-if="ruleForm.type == '修理订单'">
          <el-form-item label="可回退数量" class="item">
            <el-input v-model="ruleForm.backNum" ref="input" readonly></el-input>
          </el-form-item>
          <el-form-item label="回退数量" class="item">
            <el-input v-model="ruleForm.num" ref="input"></el-input>
          </el-form-item>
          <div>
            <el-button type="primary" @click="dialogVisibleUOpen()">修理订单回退提交</el-button>
          </div>
        </div>
        <div v-else>
          <el-form-item label="模具编码" style="margin-left: 100px;text-align: left;">
            <el-checkbox-group v-model="checkList"
              style="height: 200PX;width: 466PX; overflow: scroll; border: solid 1PX; padding: 5px">
              <el-checkbox style="text-align: left;" v-for="item  in list"
                :label="item.number">{{ item.number }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>

          <el-form-item label="回退工艺" style="margin-left: 100px;text-align: left;">
            <el-checkbox-group v-model="backProduction"
              style="height: 200px;width: 466px;border:1px solid #ddd;padding: 5px">
              <el-checkbox style="text-align: left;" v-for="item  in productions" :label="item">{{ item }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-button type="primary" @click="dialogVisibleNOpen()">新品订单回退提交</el-button>
        </div>
      </div>

      <!-- <el-button type="info"   @click="query()">模拟查询</el-button> -->
    </el-form>

    <el-dialog title="提示" :visible.sync="dialogVisibleN" width="30%" :before-close="handleCloseN">
      <span>是否确认回退？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleN = false">取 消</el-button>
        <el-button type="primary" @click="submitN()">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="提示" :visible.sync="dialogVisibleU" width="30%" :before-close="handleCloseU">
      <span>是否确认回退？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleU = false">取 消</el-button>
        <el-button type="primary" @click="submitU()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import api from "../../../api";
import { productionList } from "../../common/enum";
const debounce = (() => {
  let timer = null;
  return (callback, wait) => {
    clearTimeout(timer);
    timer = setTimeout(callback, wait);
  };
})();
export default {

  data() {
    return {
      dialogVisibleN: false,
      dialogVisibleU: false,
      backProduction: [],
      productions: [],
      dialogVisible: true,
      orderItem: {},
      rejectReason: [],
      replenishmentParams: {},
      rules: {
        reason: [{ required: true, message: "请输入原因", trigger: "change" }],
        dept: [
          { required: true, message: "请选择责任部门", trigger: "change" },
        ],
        useSpecs: [{ required: true, message: "请输入", trigger: "blur" }],
        angle: [{ required: true, message: "请填写", trigger: "blur" }],
      },
      options: ["新品订单", "修理订单"],
      ruleForm: {
        type: sessionStorage.getItem("type") == '' ? "新品订单" : sessionStorage.getItem("type"),
        code: "",
        number: '',
        production: "",
        orderNo: "",
        value: "",
        backNum: "",
        custNo: "",
        specs: "",
        num: "",
      },
      list: [],
      checkList: [],
      code: "",

    };
  },
  created() {
    this.depart = ResponsibleDepartment;
  },
  watch: {
    "ruleForm.value": {
      handler: function (newVal, oldVal) {
        debounce(() => {
          console.info("newVal", newVal);
          if (newVal == "") {
            return true;
          }
          if (newVal.length < 2) {
            this.ruleForm.value = "";
            return;
          }
          console.info("value", this.ruleForm.value);

          // 工序码
          if (
            this.ruleForm.value.indexOf("/") > -1 &&
            this.ruleForm.value != ""
          ) {
            if (this.ruleForm.orderNo == "") {
              this.$message.error("请先扫产品码");
              return;
            }

            let label = this.ruleForm.value.split("/")[0];
            let tag = this.ruleForm.value.split("/")[1];
            tag = tag === "0" ? "-开始" : "-结束";
            let value = this.getProductionValue(label);
            this.ruleForm.production = value;
            this.query();


          }
          else if (
            this.ruleForm.value.indexOf("-") > -1 &&
            this.ruleForm.value != ""
          ) {

            this.ruleForm.code = this.ruleForm.value;
            this.ruleForm.orderNo = this.ruleForm.code.split("-")[0];
            let a = this.ruleForm.code.split("-")[1];
            // 含有小数点 说明是规格号 是修理品订单
            if (a.indexOf(".") > -1) {
              this.ruleForm.specs = this.ruleForm.code.split("-")[1];
              this.ruleForm.type = '修理订单';
            }
            else {
              this.ruleForm.type = '新品订单';
              this.ruleForm.number = this.ruleForm.code.split("-")[1];
              this.checkList.push(this.ruleForm.number);

            }

            // this.checkList.push(this.ruleForm.number);
            this.query();

          } else if (
            typeof this.ruleForm.value === "number" &&
            !isNaN(this.ruleForm.value)
          ) {
            // 当员工码处理
            if (this.ruleForm.value != "" && this.ruleForm.value != "0") {
              this.ruleForm.staffNumber = this.ruleForm.value;

              console.info(
                "开始查询员工信息，查询参数：" + this.ruleForm.staffNumber
              );
              api
                .staffFlow({ number: this.ruleForm.staffNumber })
                .then((res) => {
                  this.ruleForm.staff = res.data.name;
                  this.ruleForm.staffNumber = this.ruleForm.staffNumber;
                  sessionStorage.setItem("staff", this.ruleForm.staff);
                  sessionStorage.setItem(
                    "staffNumber",
                    this.ruleForm.staffNumber
                  );
                });
            }
          }
          this.ruleForm.value = "";
        }, 40);
      },
    },
  },
  mounted() {
    document.addEventListener("keydown", (e) => {
      console.info(e);
      if (e.srcElement.id == "bsnum" || e.srcElement.id == "ngnum") {
        return true;
      }
      // 不能包含：Enter Shift
      if ("EnterShift".indexOf(e.key) != -1) {
        return;
      }
      if (
        !isNaN(e.key) ||
        e.key == "-" ||
        e.key == "." ||
        e.key == "/" ||
        /^[a-zA-Z]*$/.test(e.key)
      ) {
        this.ruleForm.value = this.ruleForm.value + e.key;
      }
    });
  },
  methods: {
    getProductionValue(label) {
      for (var i = 0; i < productionList.length; i++) {
        var item = productionList[i];
        console.info("item", item);
        if (label == item.label) {
          return item.value;
        }
      }
      return "";
    },
    dialogVisibleNOpen() {
      if (this.ruleForm.code == '') {
        this.$message('请先扫产品码');
        return;
      }
      if (this.checkList.length == 0) {
        this.$message('请先选择模具编号');
        return;
      }

      if (this.backProduction.length == 0) {
        this.$message('请先选择回退工艺');
        return;
      }

      this.dialogVisibleN = true;
    },
    dialogVisibleUOpen() {
      if (this.ruleForm.code == '') {
        this.$message('请先扫产品码');
        return;
      }
      if (this.ruleForm.production == '') {
        this.$message('请先扫工序码');
        return;
      }
      if (this.ruleForm.num == '') {
        this.$message('请先输入回退数量');
        return;
      }
      if (Number(this.ruleForm.num) > Number(this.ruleForm.backNum)) {
        this.$message('回退数量不能大于' + this.ruleForm.backNum);
        return;
      }
      this.dialogVisibleU = true;
    },
    submitN() {
      this.dialogVisibleN = false;
      api
        .backList({ orderNo: this.ruleForm.orderNo, number: this.checkList.toString(), specs: this.ruleForm.specs, backProduction: this.backProduction.toString() })
        .then((res) => {
          console.info(res)
          if (res.code == 200) {
            this.$message('操作成功');
            this.checkList = [];
            this.backProduction = [];
            this.list = [];
            this.productions = [];
            let type = this.ruleForm.type;
            sessionStorage.setItem("type", type);
            this.ruleForm = { type: type };

          }

        })
        .catch();

    },
    submitU() {
      this.dialogVisibleU = false;
      api
        .productionRecordBackForUpdate({ orderNo: this.ruleForm.orderNo, num: this.ruleForm.num, specs: this.ruleForm.specs, nowProduction: this.ruleForm.production })
        .then((res) => {
          console.info(res)
          if (res.code == 200) {
            this.$message('操作成功');
            this.checkList = [];
            this.backProduction = [];
            this.list = [];
            this.productions = [];
            let type = this.ruleForm.type;
            this.ruleForm = {};
            this.ruleForm.type = type;
            this.ruleForm.value = "";
            location.reload();
          }
        })
        .catch();
    },


    handleCloseN(done) {
      done();
    },
    handleCloseU(done) {
      done();
    },


    typeChange() {
      console.info(this.ruleForm.type);
    },

    query() {
      if (this.ruleForm.type == '修理订单') {
        // 修理品可回退数量查询
        api
          .backForUpdateNum({ orderNo: this.ruleForm.orderNo, specs: this.ruleForm.specs, nowProduction: this.ruleForm.production })
          .then((res) => {
            this.ruleForm.backNum = res.data;
          });
      }
      else {
        api
          .listReplenishment({ orderNo: this.ruleForm.orderNo, number: this.ruleForm.number })
          .then((res) => {
            this.list = res.data.list;
            this.ruleForm.production = res.data.production;
            this.ruleForm.specs = res.data.specs
            api
              .getOrderProductions({
                orderNo: this.ruleForm.orderNo,
                specs: this.ruleForm.specs
              })
              .then((res) => {
                if (res.code === 200) {
                  this.productions = res.data;
                }
              })
              .catch();
          })
          .catch();
        api
          .queryReplenishmentParams({ orderNo: this.ruleForm.orderNo, specs: this.ruleForm.specs })
          .then((res) => {
            console.info("补料参数");
            console.info(res.data);
            this.replenishmentParams = res.data;
          });
      }
    },
    reset() {
      this.replenishment = {};
      this.list = [];
      this.ruleForm.specs = "";
      this.ruleForm.production = "";
      this.ruleForm.code = "";
    },
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.replenishment.id = null;
          this.replenishment.orderNo = this.ruleForm.orderNo;
          this.replenishment.production = this.ruleForm.production;
          this.replenishment.specs = this.ruleForm.specs;
          this.replenishment.staffNo = this.ruleForm.staffNumber;
          this.replenishment.staffName = this.ruleForm.staff;
          this.replenishment.number = this.checkList.toString();
          console.info(this.replenishment)

          api
            .addList(this.replenishment)
            .then((res) => {

            })
            .catch();

        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },


  },
};
</script>

<style scoped>
.content {
  text-align: center;
  font-size: 20px;
  margin-top: 10px;
}

.item {
  display: inline-block;
  width: 300px;
}

#form>>>.el-form-item__label {
  font-size: 14px !important;
  margin-top: 3px;
}

#form>>>.el-input--small .el-input__inner {
  height: 30px !important;
  line-height: 30px !important;
}

#form>>>.el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
  margin-bottom: 1px;
  margin-top: 1px;
  margin-left: -10px;
}

.ruleForm {
  position: absolute;
  left: 0;
  right: 0;
  top: 46px;
  margin-left: 16%;
  width: 400px;
}

.table {
  position: absolute;
  top: 220px;
  margin-left: 43%;
  /* width: 520px; */
}

.production {
  position: absolute;
  font-size: 16px !important;
  color: gray;
}

.replenishment {
  width: 400px;
  margin-top: 290px;
  margin-left: 618px;
}

.line {
  display: block;
  width: 600px;
}

.el-input {
  position: relative;
  font-size: 14px;
  display: inline-block;
  width: 178px !important;
}

.el-select>.el-input {
  display: block;
  width: 178px;
}

.el-select {
  display: inline-block;
  position: relative;
  width: 178px !important;
}

.line-left {
  display: inline-block !important;
  width: 300px;
}

.line-right {
  display: inline-block !important;
  width: 300px;
}

.el-select {
  display: inline-block;
  position: relative;
  width: 200px;
}

.class_title {
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: 600;
  margin-left: 70%;
}
</style>